@charset "utf-8";

/* 公共样式 */
/*头部*/
.head-info {
    margin     : 0;
    padding    : 0;
    width      : 100%;
    height     : 33px;
    background : url(../images/common/headbg.jpg) repeat-x;
    font-family: simsun, arial, Arial Narrow, serif;
}

.infobox {
    width      : 1200px;
    height     : 33px;
    line-height: 33px;
    margin     : 0 auto;
}

.head-welcome {
    float: left;
    width: 50%;
}

.user-control {
    float: right;

    li {
        float        : left;
        position     : relative;
        padding-right: 10px;

        b {
            top       : 13px;
            right     : 8px;
            width     : 7px;
            height    : 4px;
            background: url(../images/common/detail.gif) no-repeat -252px -30px;
            position  : absolute;
            overflow  : hidden;
        }

        &.tel {
            color       : #ff1a3a;
            font-size   : 18px;
            font-family : Arial, Helvetica, sans-serif;
            padding-left: 30px;
            font-style  : italic;

            span {
                width     : 16px;
                height    : 13px;
                top       : 9px;
                left      : 7px;
                background: url(../images/common/detail.gif) no-repeat -269px -30px;
                position  : absolute;
                overflow  : hidden;
            }
        }
    }

    .line {
        color: #ddd;
    }

    .hide {
        width       : 60px;
        z-index     : 1;
        padding-left: 10px;

        &:hover {
            width        : 59px;
            background   : #fff;
            border       : 1px solid #dcdcdc;
            border-bottom: none;
            border-top   : none;

            .myaccount {
                display     : block;
                position    : absolute;
                top         : 33px;
                left        : -1px;
                width       : 69px;
                background  : #fff;
                border      : 1px solid #dcdcdc;
                padding-left: 10px;
                border-top  : none;

                p {
                    line-height: 20px;
                    height     : 20px;

                    a {
                        &:hover {
                            text-decoration: underline;
                            color          : #ff1a3a;
                        }
                    }
                }
            }

            b {
                top   : 13px;
                right : 7px;
                width : 7px;
                height: 4px;
            }
        }
    }

    .myaccount {
        display: none;
    }
}

.headbox {
    width : 1200px;
    margin: 0 auto;
    height: 90px;

    div {
        float: left;
    }

    .logo {
        width  : 320px;
        padding: 15px 0 0 35px;
        display: inline-block;
    }

    .searchbox {
        width     : 650px;
        margin-top: 22px;

        a {
            &:hover {
                text-decoration: underline;
                color          : #ef3621;
            }
        }

        .hh-item {
            background-color: #eee;
        }

        .del-keywords {
            position    : absolute;
            visibility  : hidden;
            cursor      : pointer;
            margin-left : 340px;
            margin-top  : 2px;
            padding     : 5px;
            font-size   : 14px;
            *margin-left: -20px;
        }

        &:hover {
            .del-keywords {
                visibility: visible;
            }
        }
    }

    .search {
        width     : 428px;
        height    : 30px;
        background: url(../images/common/detail.gif) no-repeat 0 -521px;
        border    : 2px solid #02a3f0;

        &:hover {
            background-position: 0 0;
        }

        input {
            border    : none;
            background: none;
            float     : left;
            width     : 341px;
            height    : 14px;
            color     : #666;
            font-size : 14px;
            padding   : 8px 10px;
            outline   : 0 none;
        }

        strong {
            width      : 67px;
            height     : 30px;
            line-height: 30px;
            cursor     : pointer;
            overflow   : hidden;
            color      : #fff;
            font-size  : 14px;
            text-align : center;
            float      : right;
        }
    }

    .hot-key {
        padding-top: 3px;
        width      : 630px;
        overflow   : hidden;
        white-space: nowrap;

        a {
            height     : 22px;
            line-height: 22px;
            padding    : 4px;
        }
    }

    .shoppingcart {
        float      : right;
        height     : 44px;
        line-height: 44px;
        margin-top : 20px;
        position   : relative;
        width      : 195px;

        .trigger {
            background  : url(../images/common/detail.gif) no-repeat 0px -30px;
            display     : block;
            font-size   : 12px;
            padding-left: 70px;
            position    : relative;
            width       : 125px;
            z-index     : 11;
            height      : 44px;
            line-height : 44px;
        }

        &:hover {
            .shoplist {
                background : #fff;
                border     : 1px solid #dcdcdc;
                display    : block;
                left       : -98px;
                position   : absolute;
                top        : 42px;
                width      : 330px;
                max-height : 374px;
                z-index    : 10;
                padding-top: 10px;

                .goodslist {
                    width     : 330px;
                    max-height: 300px;
                    overflow-y: auto;
                }

                dl {
                    height       : 41px;
                    display      : block;
                    margin       : 0px 15px;
                    padding      : 7px 0;
                    background   : #fff;
                    border-bottom: 1px dashed #e4e4e4;

                    dt {
                        width : 40px;
                        height: 40px;
                        float : left;

                        img {
                            width: 100%;
                        }
                    }

                    dd {
                        float      : left;
                        height     : 40px;
                        overflow   : hidden;
                        line-height: 17px;
                    }

                    .pro-name {
                        width  : 140px;
                        padding: 5px 10px;
                        height : 30px;
                    }

                    .pro-price {
                        width      : 75px;
                        text-align : right;
                        float      : right;
                        color      : #ff1a3a;
                        font-weight: bold;
                        font-family: microsoft yahei;
                        padding    : 5px 0;
                        height     : 30px;

                        a {
                            display    : block;
                            font-weight: normal;
                            font-family: simsun;
                            color      : #1968c0;
                            cursor     : pointer;
                        }
                    }
                }

                .lastdl {
                    border-bottom: none;
                }

                .sum {
                    border-top: 1px solid #dcdcdc;
                    background: #f8f8f8;

                    p {
                        line-height  : 30px;
                        height       : 30px;
                        text-align   : right;
                        width        : 320px;
                        padding-right: 10px;

                        b {
                            font-weight: bold;
                            color      : #ff1a3a;
                            padding    : 0 4px;
                            font-family: microsoft yahei;
                        }

                        em {
                            font-weight: bold;
                            color      : #ff1a3a;
                            padding    : 0 4px;
                            font-family: microsoft yahei;
                        }
                    }

                    a {
                        float      : right;
                        width      : 100px;
                        height     : 28px;
                        line-height: 28px;
                        text-align : center;
                        color      : #fff;
                        margin     : 5px 10px 10px;
                        background : url(../images/common/detail.gif) no-repeat 0 -206px;
                    }
                }
            }

            .trigger {
                background : url(../images/common/detail.gif) no-repeat 0px -74px;
                height     : 42px;
                line-height: 43px;
                padding-top: 1px;
            }
        }

        strong {
            color      : #ff1a3a;
            margin     : 0 4px;
            font-family: microsoft yahei;
        }
    }

    .shoplist {
        display: none;
    }
}

/*搜索*/
#search-helper {
    position        : absolute;
    visibility      : hidden;
    width           : 362px;
    border          : 1px solid #02a3f0;
    background-color: #fff;
    z-index         : 2;
    margin-top      : 31px;
    margin-left     : -2px;
    *margin-left    : -363px;
    box-shadow      : 3px 3px 5px #b8b8b8;

    li {
        padding: 5px;
        cursor : pointer;
        color  : #000;

        span {
            position: absolute;
            right   : 5px;
            color   : #999;
        }
    }
}

/*购物车*/
/*导航*/
.mainnav {
    width     : 100%;
    background: url(../images/common/navbg.jpg) repeat-x;
    height    : 40px;
    clear     : both;
}

#webf0 {
    strong {
        &:first-child {
            padding-top: 5px;
        }
    }
}

.navbox {
    width   : 1200px;
    margin  : 0 auto;
    position: relative;
    z-index : 1;

    .float-list {
        position  : absolute;
        left      : 0;
        top       : 0;
        background: url(../images/common/detail.gif) no-repeat 0 -117px;
        z-index   : 2;

        dl {
            display: none;
        }
    }

    .subnav {
        position    : absolute;
        top         : 0;
        left        : 230px;
        width       : 960px;
        height      : 40px;
        line-height : 40px;
        font-size   : 16px;
        font-family : microsoft yahei;
        padding-left: 10px;
        z-index     : 2px;

        ul {
            li {
                float     : left;
                padding   : 0 30px;
                background: url(../images/common/navlibg.jpg) no-repeat left center;

                a {
                    color  : #fff;
                    display: block;

                    &:hover {
                        color: #2ad0ff;
                    }
                }
            }
        }
    }
}

.navbox .float-list,
.navbox .float-list-btn {
    display    : block;
    width      : 230px;
    z-index    : 2;
    height     : 40px;
    line-height: 40px;
    cursor     : default;
    color      : #fff;
    font-family: microsoft yahei;
    text-align : center;
    font-size  : 16px;
}

/*侧面分类*/
.float-list {
    dl {
        position: relative;
        float   : left;
        z-index : 2;
        clear   : both;
        width   : 230px;

        a {
            &:hover {
                color: #0098e0;
            }
        }

        dt {
            position   : relative;
            float      : left;
            width      : 208px;
            border     : 1px solid #e7e7e7;
            border-top : none;
            line-height: 22px;
            overflow   : hidden;
            text-align : left;
            padding    : 13px 0px 6px 20px;
            background : #f8f8f8;

            &.hover {
                background-color: #fff;
                width           : 210px;
                z-index         : 2;
                border          : 1px solid #bdbdbd;
                border-right    : none;
                border-left     : 2px solid #00adff;
                padding-left    : 19px;
                padding-top     : 12px;

                .arrow-right {
                    top  : 16px;
                    right: 17px;
                }
            }

            a {
                color: #666;
            }

            strong {
                float   : left;
                width   : 228px;
                height  : 18px;
                overflow: hidden;
                margin  : 0 0 4px;

                a {
                    color      : #333;
                    font-size  : 14px;
                    font-family: microsoft yahei;
                    line-height: 18px;
                }
            }

            p {
                clear      : both;
                height     : 44px;
                line-height: 22px;
                overflow   : hidden;
                font-family: simsun;
                font-size  : 12px;

                a {
                    white-space : nowrap;
                    margin-right: 13px;
                    float       : left;
                }
            }
        }

        dd {
            display   : none;
            position  : absolute;
            left      : 230px;
            width     : 650px;
            background: #fff;
            border    : 1px solid #bdbdbd;
            z-index   : 1;

            a {
                color      : #666;
                white-space: nowrap;
            }

            .secondlist {
                float      : left;
                width      : 380px;
                padding    : 0 20px;
                font-family: simsun;
                font-size  : 12px;

                li {
                    width        : 380px;
                    padding      : 10px 0;
                    border-bottom: 1px dotted #ccc;
                    line-height  : 22px;
                    overflow     : hidden;

                    strong {
                        float      : left;
                        width      : 70px;
                        font-weight: bold;
                        text-align : left;

                        a {
                            padding: 0;
                            color  : #444;
                        }
                    }

                    .float-list-cont {
                        float: left;
                        width: 310px;

                        a {
                            float: left;
                        }
                    }

                    a {
                        padding: 0 13px 0 0;
                    }
                }
            }

            .hotbrand {
                float     : left;
                width     : 200px;
                background: #f8f8f8;
                padding   : 15px;

                h4 {
                    color        : #666;
                    font-family  : simsun;
                    border-bottom: 1px solid #666;
                    line-height  : 30px;
                    height       : 30px;
                    text-align   : left;
                }

                ul {
                    width  : 200px;
                    padding: 10px 0;
                    float  : left;

                    li {
                        border      : none;
                        text-align  : left;
                        padding-left: 0;
                        font-family : simsun;
                        font-size   : 12px;
                        line-height : 22px;
                        float       : left;
                        width       : 100px;
                    }
                }
            }
        }
    }
}

/*.float-list dl dt */
.arrow-right {
    position  : absolute;
    top       : 17px;
    right     : 15px;
    background: url(../images/common/detail.gif) no-repeat -310px -30px;
    width     : 6px;
    height    : 9px;
}

/*尾部*/
.footer {
    float        : left;
    width        : 100%;
    height       : 200px;
    background   : url(../images/common/f_03.jpg) repeat-x;
    border-top   : 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    margin       : 30px auto;
    overflow     : hidden;

    .f-cont {
        width : 1200px;
        margin: 25px auto;

        .f-info {
            float       : left;
            width       : 240px;
            padding-left: 44px;

            .tel {
                background: url(../images/common/detail.gif) no-repeat 0 -157px;
                height    : 49px;
                width     : 197px;

                .num {
                    color       : #ff1a3a;
                    font-size   : 20px;
                    font-family : Arial;
                    padding-left: 72px;
                    font-style  : italic;
                    font-weight : bold;
                    padding-top : 8px;
                }

                .time {
                    color     : #444;
                    text-align: right;
                    width     : 197px;
                }
            }

            .weibo {
                background  : url(../images/common/w.jpg) no-repeat;
                width       : 197px;
                height      : 22px;
                line-height : 22px;
                font-family : microsoft yahei;
                margin-top  : 10px;
                font-size   : 14px;
                font-family : microsoft yahei;
                font-weight : bold;
                padding-left: 30px;

                a {
                    margin-left: 6px;
                }
            }

            .ding {
                margin-top: 10px;

                input {
                    width       : 132px;
                    height      : 24px;
                    line-height : 24px;
                    background  : #fff;
                    border      : 1px solid #e8e8e8;
                    color       : #666;
                    padding-left: 4px;
                    font-size   : 12px;
                    outline     : 0 none;
                }
            }

            .ps {
                color       : #9b9b9b;
                line-height : 22px;
                padding-left: 3px;
            }
        }

        .howto {
            float       : left;
            width       : 100px;
            padding-left: 25px;
            border-left : 1px solid #e1e1e1;
            height      : 150px;

            dt {
                margin-bottom: 14px;

                a {
                    font-size  : 16px;
                    color      : #444;
                    font-family: microsoft yahei;
                }
            }

            dd {
                a {
                    height     : 22px;
                    line-height: 22px;
                    color      : #999;
                }
            }
        }

        .lastdl {
            border-right: 1px solid #e1e1e1;
        }

        .wei {
            padding-top : 11px;
            padding-left: 33px;
            float       : left;
            background  : url(../images/common/ss.jpg) no-repeat 30px 104px;
            width       : 125px;
            height      : 150px;

            img {
                border: 1px solid #e1e1e1;
            }
        }
    }
}

#subscribe_btn {
    margin-left: 6px;
}

.foot-bottom {
    width        : 880px;
    border-bottom: 1px solid #ccc;
    height       : 130px;
    clear        : both;
    margin       : 0 auto;
    padding      : 0 160px 0 160px;

    .fb {
        width : 140px;
        height: 110px;
        float : left;
        margin: 0 40px;

        dt {
            width        : 108px;
            height       : 50px;
            margin-bottom: 10px;
            margin-left  : 16px;
        }

        dd {
            text-align : center;
            line-height: 20px;
            height     : 20px;
            font-size  : 13px;
            color      : #444;
            font-family: microsoft yahei;
        }
    }
}

.beian {
    text-align : center;
    line-height: 44px;
    height     : 44px;
    font-size  : 14px;
    color      : #444;
    font-family: microsoft yahei;
}

.kfbox {
    position    : fixed;
    _position   : absolute;
    width       : 58px;
    bottom      : 8px;
    margin-left : 1210px;
    _margin-left: 0px;
    z-index     : 100;
    _right      : -10px;

    .top {
        visibility: hidden;

        dt {
            width     : 22px;
            height    : 21px;
            overflow  : hidden;
            background: url(../images/common/kf.jpg) no-repeat 0 -24px;
            margin    : 0 auto;
        }
    }

    dl {
        font-family: microsoft yahei;
        font-size  : 12px;
        color      : #444;
        width      : 56px;
        background : #fff;
        border     : 1px solid #eee;
        padding    : 8px 0;
        text-align : center;
        cursor     : pointer;

        dd {
            margin-top: 8px;
        }
    }

    .kf {
        dt {
            width     : 22px;
            height    : 24px;
            overflow  : hidden;
            background: url(../images/common/kf.jpg) no-repeat 0 0;
            margin    : 0 auto;
        }
    }
}

#lyrMask {
    position        : fixed;
    visibility      : hidden;
    width           : 100%;
    height          : 100%;
    top             : 0px;
    left            : 0px;
    background-color: #666;
    opacity         : 0.2;
    filter          : alpha(opacity=20);
    z-index         : 100;
}

#qrcode-box {
    position   : absolute;
    background : url(../images/common/qrcode-app.png) no-repeat;
    width      : 80px;
    height     : 80px;
    margin-left: 500px;
    margin-top : -15px;
}

#mobile-menu {
    position        : absolute;
    visibility      : hidden;
    border          : 1px solid #999;
    background-color: #fff;
    margin-left     : -50px;
    width           : 180px;
    z-index         : 10;
    padding         : 5px;
    box-shadow      : 3px 3px 5px #b8b8b8;
    margin-top      : 0px;

    .app {
        background   : url(../images/common/qrcode-app.png) no-repeat;
        height       : 90px;
        border-bottom: 1px solid #ccc;
        padding-left : 85px;
        padding-top  : 2px;

        p {
            a {
                width       : 25px;
                height      : 25px;
                display     : inline-block;
                background  : url(../images/common/mobile-system.png) no-repeat;
                margin-right: 5px;
                margin-top  : 5px;

                &.android {
                    background-position: 0px -26px;
                }
            }
        }
    }

    .gzh {
        background  : url(../images/common/qrcode-gzh.jpg) no-repeat 0px 10px;
        height      : 80px;
        padding-top : 13px;
        padding-left: 85px;
    }
}